<script setup name="lineChart">
import * as echarts from 'echarts'
import { markRaw, nextTick } from 'vue'
const props = defineProps({
  xAxisData: {
    type: Array,
    default: () => []
  },
  yAxisData: {
    type: Array,
    default: () => []
  },
  width: {
    type: String,
    default: '9.25rem'
  },
  height: {
    type: String,
    default: '9.25rem'
  },
  color: {
    type: String,
    default: '#f2bd42'
  },
  name: {
    type: String,
    default: '默认'
  }
})
// 线边仓实例
const lineEdgeRef = ref(null)

const myChart = ref()
const option = {
  tooltip: {
    trigger: 'axis',
    // 鼠标悬浮提示框显示 X和Y 轴数据
    trigger: 'axis',
    backgroundColor: 'rgba(32, 33, 36,.7)',
    borderColor: 'rgba(32, 33, 36,0.20)',
    borderWidth: 1,
    textStyle: {
      // 文字提示样式
      color: '#fff',
      fontSize: '12'
    },
    itemStyle: {
      borderRadius: 10,
      borderColor: '#fff'
    }
  },
  legend: {
    data: ['FAI', 'FQC', 'IPQC', 'IQC', 'OQC'],
    textStyle: {
      //图例文字的样式
      color: '#fff',
      fontSize: '16px'
    }
  },
  // echarts固定高度
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      interval: 0, //全部显示x轴
      fontSize: '12px'
    },
    splitNumber: 7,
    data: []
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      // interval: 0,
      // rotate: 0,
      // color: '#21C1FF',
      fontSize: '14px'
    }
  },
  series: [
    {
      name: 'FAI',
      type: 'line',

      data: []
    },
    {
      name: 'FQC',
      type: 'line',

      data: []
    },
    {
      name: 'IPQC',
      type: 'line',

      data: []
    },
    {
      name: 'IQC',
      type: 'line',

      data: []
    },
    {
      name: 'OQC',
      type: 'line',

      data: []
    }
  ]
}

// 动态
const init = cityIndex => {
  myChart.value.dispatchAction({ type: 'downplay', seriesIndex: 0 })
  myChart.value.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: cityIndex })
  myChart.value.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: cityIndex })
}
let tiemr = null
const initData = () => {
  clearInterval(tiemr)
  props.yAxisData.forEach((item, index) => (option.series[index].data = props.yAxisData[index]))

  //   option.series[0].name = props.yAxisData
  option.xAxis.data = props.xAxisData
  // 初始化echart
  const chartRefWrap = unref(lineEdgeRef)
  if (chartRefWrap) {
    myChart.value = markRaw(echarts.init(chartRefWrap))

    myChart.value.setOption(option)
    window.addEventListener('resize', chartsResize)
    //自动切换顺序
    var cityIndex = 0
    tiemr = setInterval(function () {
      if (cityIndex < props.xAxisData.length) {
        init(cityIndex)
        cityIndex++
      } else {
        cityIndex = 0
        init(cityIndex)
        cityIndex++
      }
    }, 1000)
    //自动切换顺序
  }
}

const chartsResize = () => {
  myChart.value && myChart.value.resize()
}

nextTick(() => {
  initData()
})

watch(
  () => props.yAxisData,
  val => {
    if (val.length > 0) {
      nextTick(() => {
        initData()
      })
    }
  },
  {
    deep: true,
    immediate: true
  }
)
</script>

<template>
  <div ref="lineEdgeRef" :style="{ width: props.width, height: props.height }"></div>
</template>

<style lang="scss" scoped>
.ss {
  background-color: red;
}
</style>
